<template>
    <div style="flex: 1;height: 100%">
        <div class="nullContent" v-if="nullContent"><img style="height: 100px;"
                                                         src="../../assets/images/nullContent.png" alt="">暂无数据
        </div>
        <div ref="dom" style="display: flex;flex: 1;height: 100%" v-show="!nullContent"></div>
    </div>
</template>

<script>
import resize from './mixins/resize';
export default {
    name: 'multiLine',
    mixins: [resize],
    props: {
        value: Object,
        text: String,
        subtext: String,
        labelName: Array,
        height: String
    },
    data () {
        return {
            chart: null,
            nullContent: false
        };
    },
    watch: {
        value: {
            handler: 'initChart',
            immediate: true,
            deep: true
        }
    },
    mounted () {
        this.initChart();
    },
    beforeDestroy () {
        if (!this.chart) {
            return;
        }
        this.chart.dispose();
        this.chart = null;
    },
    methods: {
        initChart () {
            this.$nextTick(() => {
                let option = {};
                if (this.value.data.length > 0) {
                    this.nullContent = false;
                    let colors = ['#327DFF', '#40B121', '#FF7F00'];
                    let serieData = [];
                    this.value.data.forEach((res, key) => {
                        serieData.push({
                            name: res.name,
                            type: 'line',
                            showSymbol: true,
                            symbol: 'circle',
                            data: res.data,
                            yAxisIndex: key
                        });
                    });
                    option = {
                        color: colors,
                        title: {
                            text: this.text,
                            subtext: this.subtext,
                            x: 'center',
                            'textStyle': {
                                'color': '#516b91'
                            }
                        },
                        legend: {
                            orient: 'horizontal',
                            left: 'center',
                            data: ['收款店铺数', '收款笔数', '收款金额']
                        },
                        grid: {

                            left: '6%',
                            right: '6%'
                        },
                        tooltip: {
                            trigger: 'axis',
                            backgroundColor: 'rgba(255, 255, 255, 0.85)',
                            textStyle: {
                                color: 'rgba(0,0,0,0.65)'
                            },
                            extraCssText: 'box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3)'
                            // formatter: (p) => {
                            //     let s = `${parseTime(+p[0].name, '{y}-{m}-{d} {h}:{i}:{s}')}<br/>`;
                            //     let t = '';
                            //     for (let i = 0; i < p.length; i++) {
                            //         t += `${p[i].seriesName}:  ${p[i].value}  ${p[i].data.unit}<br/>`;
                            //     }
                            //     return s + t;
                            // }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: this.value.date,
                            axisLine: {
                                onZero: false,
                                lineStyle: {
                                    width: 1,
                                    type: 'solid'
                                }
                            }
                        },
                        yAxis: [
                            {
                                type: 'value',
                                name: '收款店铺数(家)',
                                position: 'left',
                                nameTextStyle: {
                                    fontSize: 14,
                                    color: 'rgba(0, 0, 0, 1)',
                                    fontWeight: 400
                                },
                                axisLabel: {
                                    color: colors[0],
                                    fontSize: 14
                                }
                            },
                            {
                                type: 'value',
                                name: '收款笔数(笔)',
                                position: 'right',
                                offset: -100,
                                nameTextStyle: {
                                    fontSize: 14,
                                    color: 'rgba(0, 0, 0, 1)',
                                    fontWeight: 400
                                },
                                axisLabel: {
                                    color: colors[1],
                                    fontSize: 14
                                }
                            },
                            {
                                type: 'value',
                                name: '收款金额(元)',
                                position: 'right',
                                offset: 0,
                                nameTextStyle: {
                                    fontSize: 14,
                                    color: 'rgba(0, 0, 0, 1)',
                                    fontWeight: 400
                                },
                                axisLabel: {
                                    color: colors[2],
                                    fontSize: 14
                                }
                            }
                        ],
                        series: serieData
                    };
                } else {
                    option = {
                        // title: {
                        //     show: true,
                        //     textStyle: {
                        //         color: '#c5c8ce',
                        //         fontSize: 20,
                        //         fontWeight: 'normal'
                        //     },
                        //     text: '暂无数据',
                        //     left: 'center',
                        //     top: 'center'
                        // },
                        xAxis: {
                            show: false
                        },
                        yAxis: {
                            show: false
                        },
                        series: []
                    };
                    this.nullContent = true;
                }
                this.chart = echarts.init(this.$refs.dom);
                this.chart.clear();
                this.chart.setOption(option);
            });
        }
    }
};
</script>

<style scoped>

</style>
